<template>
  <div class="floor-plan-page">
    <header>
      <div><span class="sm">Job No: </span>{{ headerData.jobNo }}</div>
      <div>
        <span class="sm">AsignedInspector: </span
        >{{ headerData.assignedInspector }}
      </div>
      <div class="lg">{{ headerData.other }}</div>
    </header>
    <div class="form" v-for="item in floorPlan">
      <div class="img-box">
        <img src="../assets/floor plan.png" alt="" />
      </div>
      <a-input class="input" v-model="item.name" />
      <a-button class="btn" @click="spot(item.name)"
        >Mark Inspection Spot</a-button
      >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      floorPlan: [
        {
          name: "Floor Plan A",
        },
        {
          name: "Floor Plan B",
        },
      ],
      headerData: {
        jobNo: "2020/20390/BOC",
        assignedInspector: "Davidv Chow",
        other: "S9 Florissa Park Giffard Mansion",
        part: "Part A: The Subject Building/Land",
      },
    };
  },
  methods: {
    spot(name) {
      this.$router.push({
        path: "/inspectionFormB",
        query: {
          name: name,
        },
      });
    },
  },
};
</script>
<style scoped>
.floor-plan-page {
  width: 90vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
header {
  width: 100%;
  padding: 0.05rem 0;
}
header div {
  line-height: 0.12rem;
}
.sm {
  color: #abafb2;
}
.lg {
  font-size: 0.08rem;
  font-weight: 600;
}
.xlg {
  font-size: 0.08rem;
  font-weight: 800;
  color: #000;
}
.form {
  margin: 0.06rem 0;
}
.img-box {
  width: 100%;
  border: 1px solid rgb(34, 34, 34);
}
.img-box img {
  width: 100%;
}
.input {
  margin: 0.05rem 0;
  height: 0.2rem;
  font-size: 0.1rem;
}
.btn {
  width: 100%;
  height: 0.28rem;
  font-size: 0.08rem;
  background-color: var(--primary-color);
  color: var(--text-color);
}
.btn:hover {
  color: var(--text-color);
  border-color: var(--primary-color);
}
</style>